<template>
	<div class="home-hot">
		<div v-for="(item,i) in catelist" :key="item.id">
			<div class="hot">
				<img :src="`/api/public/showimg/`+item.pic" />
				<ul>
					<p>
						<b>
							<router-link to="/">{{item.name}}</router-link>
							<span>{{item.price}}￥</span>
						</b>
					</p>
					<div class="enter">
						<p> {{item.maker}}</p>
						<p> {{item.author}}</p>
<button class="el-icon-shopping-cart-2"@click="add(item.id)"></button>
					</div>
				</ul>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'HomeCategory',
		props: ["catelist"],
		data() {
			return{
				list:[]
			}
		},
		methods: {
			add(id){
				    this.$emit('bookid',id)
			}
		},
	
	}
</script>

<style scoped>
	.home-hot {
		width: 25%;
		height: 390px;
		overflow: hidden;
		overflow:auto
		/* border: 1px solid #0f0f0f; */
	}

	.home-hot img {
		vertical-align: middle;
		display: block;
		width: 60px;
		height: 60px;
		border-radius: 50%;
	}

	.home-hot .hot {
		display: flex;
		margin: 15px;
		/* border: 1px solid #0f0f0f; */
	}
		.home-hot .hot a{
			color: #000000
		}

	.home-hot .hot p {
		display: flex;
		font-size: 15px;
	}

	.home-hot .hot ul {
		margin: 5px;
		width: 100%;
	}

	.home-hot .hot a {
		margin: 5px;
	}

	.home-hot .hot .enter {
		display: flex;
		font-size: 10px;
		margin: 5px;
		justify-content: space-between;
	}
		.home-hot .hot .enter button{
			width: 30px;
			height: 30px;
			line-height: 30px;
			background-color: #1e90ff;
			border-radius: 6px;
			border: #c8c8c8 solid 1px;
		}
		.home-hot .hot .enter button:hover{
			border: #737373 solid 1px;
		}
</style>